<template>
	<view class="p12 have-fixed-bottom" style="padding-bottom: 200rpx;">
		<view class="module-card c255">
			<image src="../../../static/image/bg-ti.png" style="width: 100%;" mode="widthFix"></image>
			<view class="card-content p20 pt35">
				当前余额(元)
				<view class="fz18 mt10">{{userInfo.balance || 0}}</view>
			</view>
		</view>
		<view class="fz14 mt16">提现金额</view>
		<view class="u-flex mt16" style="flex-wrap: wrap;">
			<view class="item" @click="curIndex=index" v-for="(item,index) in dataList" :key="index"
				:class="curIndex==index?'on':''">
				<view class="item-content">

					<view class="fz15">{{item.label}}
					</view>


				</view>
			</view>
		</view>

		<view class="mt10">
			<view class="p15 pt20 pb20" style="background: #F8F8F8;">
				<input style="padding: 0;" v-model="price" type="text" placeholder="自定义金额" />
			</view>
		</view>
		<view class="mt20">
			<view class="u-flex u-f-jsb">
				<span class="u-flex u-f-justify">
					<image src="../../../static/image/ic-bank.png" class="w20 h20 mr5"></image>选择银行卡
				</span>

				<!-- <u-icon name="arrow-down" class="fz12 c6"></u-icon> -->
			</view>
			<view class="mt18">
				<view>
					<view @click="curBank=index" :class="curBank==index?'on':''" v-for="(item,index) in bankList"
						:key="index">
						<view class="p12 mt8 u-flex u-f-jsb" style="background: #F8F8F8;">
							<span>{{item.memberName}}（{{item.memberCode}}）</span>
							<u-icon v-if="curBank==index" name="checkmark-circle-fill" color="#F24646"
								size="36"></u-icon>
							<u-icon v-else name="checkmark-circle" color="#999" size="36"></u-icon>
						</view>
					</view>
				</view>
				<view @click="showCard=true" class="p12 mt8 u-flex u-f-justify" style="background: #F8F8F8;">
					<u-icon name="plus" class="mr4"></u-icon>添加银行卡
				</view>
			</view>
		</view>

		<view class="fixed-bottom module-btn">
			<button style="background: #F24646;" type="primary" @click="toCreated" class="btn">提交提现申请</button>
		</view>
<u-popup :mask-close-able="false" v-model="showCard" mode="bottom" border-radius="20" :closeable="true">
			<view class="p20">
				<view></view>
				<scroll-view style="height: 750rpx;" scroll-y="true">
					<bankCard @success="bankSuccess"></bankCard>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import bankCard from "@/components/bank-card/index"
	export default {
		components: {
			bankCard
		},
		data() {
			return {
				userInfo: {},
				curIndex: 0,
				post: {},
				curBank: 0,
				price: '',
				showCard:false,
				bankList: [],
				dataList: [{
					label: '1000元',
					value: 1000
				}, {
					label: '2000元',
					value: 2000
				}, {
					label: '3000元',
					value: 3000
				}, ],
			};
		},
		computed: {},
		onShow() {
			this.initData()
			this.getBank()

		},
		methods: {
			
				bankSuccess() {
					this.showCard = false
					this.$common.errorToShow('添加成功')
					this.getBank()
				},
			getBank() {
				this.$api.bankList({}, (res) => {
					if (res.code == 200) {
						this.bankList = res.data
					}
				})

			},
			initData() {

				if (this.$db.get("userToken")) {
					this.$api.memberInfo({}, res => {
						if (res.code == 200) {
							this.userInfo = res.data;
						}
					})

				}

			},
			toCreated() {
				if (this.bankList.length <= 0) {
					this.$common.errorToShow('请添加银行卡！')
					return
				}
				let post = {
					price: this.price,
					bankId: this.bankList[this.curBank].id
				}
				if (!this.price) {
					post.price = this.dataList[this.curIndex].value
				}
				if (Number(post.price)>Number(this.userInfo.balance)) {
					this.$common.errorToShow('当前余额不足！')
					return
				}

				this.$api.withdrawDeposit(post, res => {
					if (res.code == 200) {
						this.$common.successToShow('申请成功', ress => {
							uni.navigateBack()
						})
					} else {

						this.$common.errorToShow(res.msg)
					}
				})
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}


	.module-card {
		position: relative;

		.card-content {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}
	}

	.item {
		width: 33.33%;
		min-width: 33.33%;
		max-width: 33.33%;
		padding: 0 12rpx;
		margin-bottom: 30rpx;

		.item-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 120rpx;
			background: #F8F8F8;
			border-radius: 15rpx;
			text-align: center;
		}

		&.on {
			.item-content {
				background: rgba(242, 70, 70, 0.1);
				border: 1px solid #F24646;
				color: #F24646 !important;
			}
		}

	}
</style>